<template>
  <div class="home-container">
    <div class="stats-grid">
      <div class="stat-card">
        <h3>总用户数</h3>
        <p class="stat-value">{{ homeData?.stats.totalUsers || 0 }}</p>
      </div>
      <div class="stat-card">
        <h3>总订单数</h3>
        <p class="stat-value">{{ homeData?.stats.totalOrders || 0 }}</p>
      </div>
      <div class="stat-card">
        <h3>总收入</h3>
        <p class="stat-value">¥{{ homeData?.stats.revenue || 0 }}</p>
      </div>
    </div>
    
    <div class="recent-activities">
      <h3>最近活动</h3>
      <div v-if="dataStore.loading" class="loading">加载中...</div>
      <ul v-else>
        <li v-for="activity in homeData?.recentActivities" :key="activity.id">
          {{ activity.action }} - {{ activity.time }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useDataStore } from '@/stores/data'

const dataStore = useDataStore()
const homeData = dataStore.homeData
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  margin: 0 0 1rem 0;
  color: #555;
  font-size: 1rem;
}

.stat-value {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #3498db;
}

.recent-activities {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.recent-activities h3 {
  margin: 0 0 1rem 0;
  color: #555;
}

.recent-activities ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-activities li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.recent-activities li:last-child {
  border-bottom: none;
}

.loading {
  color: #777;
  padding: 1rem;
  text-align: center;
}
</style>
